<template>
  <div class="singer">
    <Tapbar></Tapbar>
    <div class="header">
      <div class="class-list">
        <div class="active">华语</div>
        <div>欧美</div>
        <div>日韩</div>
      </div>
      <div class="sex">
        <div class="active">男</div>
        <div>女</div>
        <div>组合</div>
      </div>
      <div class="letter">
        <div v-for="(item, index) in arrs.letter" :key="index">{{ item }}</div>
      </div>
    </div>
    <div class="singer-list">
      <div class="list" v-for="(item,index) in arrs.list.huayu.nan" :key="index">
          <!-- <p>{{item}}</p> -->
          <div v-for="(item,index) in item" :key="index" class="sing">
              <img :src="item.imgsrc" alt="">
              <p>{{item.name}}</p>
          </div>
      </div>
    </div>
    <div class="bot">
        <span>&lt;</span>
        <div>1</div>
        <span>&gt;</span>
    </div>
  </div>
</template>
<script>
import Tapbar from '../components/Tapbar.vue';
import axios from "axios";
export default {
  name: "Siger",
  data() {
    return {
      arrs: null,
    };
  },
  components: {
    Tapbar
  },
  methods: {
    async fn() {
      let { data } = await axios.get("http://localhost:3000/singer");
      this.arrs = data;
      console.log(data.list.huayu.nan);
    },
    click (){
        
    }
  },
  created() {
    this.fn();
  },
};
</script>
<style scoped>
.singer{
    width: 100%;
}
.header{
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 17px;
}
.header div{
    display:flex;
    height: 26px;
    margin-bottom: 20px;
}
.header div div{
    margin-right: 12px;
    height: 26px;
    line-height:26px;
    padding: 0 10px;
    border-radius:12px;
}
.header .active{
    background:#e91e63;
    color:#fff;
}
.singer-list{
    margin: 0 auto;
    width: 1200px;
}
.singer-list .list{
    flex-wrap:wrap;
    display:flex;
    /* justify-content: space-around; */
}
.singer-list .list .sing{
    background: #f8f8f8;
    width: 15%;
    margin:0 20px 20px 0;
}
.singer-list .list .sing img{
    margin: 25px auto;
    display: block;
    width: 120px;
    height: 120px;
    border-radius: 50%;
}
.singer-list .list .sing p{
    text-align: center;
    line-height:40px
}
.bot{
    display: flex;
    justify-content: center;
    line-height: 44px;
    color:#cfcfcf;
}
.bot div{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    text-align: center;
    background:#e91e63;
    color:#fff;
    margin: 0 30px;
}
</style>